﻿@model ScadaWeb.Model.TopButtonModel
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}
<style type="text/css">
    #sltIcon {
        height: 38px;
        line-height: 38px;
        margin-left: 40px;
        float: left;
        display: block;
    }

    #spnIcon {
        font-size: 24px;
        line-height: 38px;
        float: left;
        margin-left: 12px;
    }
</style>
<form class="layui-form layui-form-pane ok-form" lay-filter="formTest">
    @*一些不需要更新的隐藏字段*@
    @Html.HiddenFor(x => x.Id)
    @Html.HiddenFor(x => x.CreateTime)
    @Html.HiddenFor(x => x.CreateUserId)
    <div class="layui-form-item">
        <label class="layui-form-label">按钮编码</label>
        <div class="layui-input-block">
            <input type="text" name="EnCode" placeholder="按钮编码" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">按钮名称</label>
        <div class="layui-input-block">
            <input type="text" name="FullName" placeholder="按钮名称" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">按钮图标</label>
        <div class="layui-input-inline">
            <input type="text"  id="Icon" name="Icon"  placeholder="按钮图标" autocomplete="off" class="layui-input"  lay-verify="required"  disabled="disabled">
        </div>
        <div class="layui-input-inline">
            <a id="sltIcon" href="javascript:;">选择图标</a><span id="spnIcon" class="icon ok-icon"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">按钮颜色</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" id="ButtonColor-Form" name="ButtonColor"   placeholder="请选择按钮颜色" class="layui-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="ButtonColor"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">程序地址</label>
        <div class="layui-input-block">
            <input type="text" id="Url" name="Url" placeholder="程序地址" autocomplete="off" class="layui-input" lay-verify="required" >
        </div>
       
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label">排序码</label>
        <div class="layui-input-block">
            <input type="text" name="SortCode" placeholder="排序码" autocomplete="off" class="layui-input" lay-verify="number" maxlength="2">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(["form", "okLayer", "okUtils", 'colorpicker'], function () {
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let layer = layui.layer;
        let $ = layui.$;
        let colorpicker = layui.colorpicker;
        $("#sltIcon").on("click", function () {
            openSetIcon();
        })
        //给表单赋值
        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "EnCode": "@Model.EnCode",
            "ButtonColor": "@Model.ButtonColor",
            "FullName": "@Model.FullName",
            "Icon": "@Html.Raw(Model.Icon)",
            "Url": "@Html.Raw(Model.Url)",
            "SortCode": "@Model.SortCode"
        });
        form.on("submit(add)", function (data) {
            okUtils.ajax("/Permissions/TopButton/Edit", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.message, function () {
                    parent.location.reload(); // 父页面刷新
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//先得到当前iframe层的索引 再执行关闭
                });
            }).fail(function (error) {
                console.log(error)
            });
            return false;
        });
        //表单赋值
        colorpicker.render({
            elem: '#ButtonColor'
          , color: '#1c97f5'
          , done: function (color) {
              $('#ButtonColor-Form').val(color);
          }
        });
    });
</script>

